<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>编程导航</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/highcharts.js"></script>
</head>

<body background="img/svg/104.jpg">
  <!--Main Navigation-->
  <header>
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark primary-color default-color indigo blue-grey">
      <div class="container">
        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">导航条</a>
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
        aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item ">
          <a class="nav-link active-check" href="http://bilibili.com" target="_blank">哔哩哔哩
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.csdn.net/" target="_blank">CSDN</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://leetcode-cn.com/" target="_blank">力扣网</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://github.com/" target="_blank">GitHub</a>
        </li>
            <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">技术交流频道</a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="https://segmentfault.com/">思否</a>
            <a class="dropdown-item" href="https://juejin.cn/">掘金</a>
            <a class="dropdown-item"  href="https://www.oschina.net/">开源中国</a>
            <a class ="dropdown-item" href="https://www.cnblogs.com/">博客园</a>
          </div>
        </li>
      </ul>
          <!-- Links -->
          <form class="form-inline">
            <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </div>
          </form>
        </div>
        <!-- Collapsible content -->
      </div>
    </nav>
    <!--/.Navbar-->
  </header>
  <!--Main Navigation-->

  <main class="mt-5">
    <!--Main container-->
    <div class="container">
      <!--Grid row 1-->
      <div class="row">
        <!--Grid column 1-->
        <div class="col-md-7 mb-4">
          <div class="view overlay z-depth-1-half">
            <img src="img/svg/005.jpg" class="card-img-top" alt="" height="250px" width="125px">
            <div class="mask rgba-white-light"></div>
          </div>
        </div>
        <!--Grid column-->
        <!--Grid column 2-->
        <div class="col-md-5 mb-4">
          <h2>编程导航的来源</h2>
          <hr>
          <p class="">我关注了一位鹅厂大佬的微信公众号，里面有大佬完成的一个编程导航开发的日志，代码和
            成品，完全免费，本意是为了程序员开发能够更加方便。于是我也想有一天能够复制出一样
            的成果。但毕竟能力太差劲，希望时日方长。
          </p>
          <a href="https://www.code-nav.cn/recommend" class="btn btn-primary" >点此进入</a>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
      <!--Grid row 2-->
      <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="img/svg/001.jpg.jpg" class="card-img-top"
          alt="" height="225px"height="225px" >
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">LeetCode</h4>
        <!--Text-->
        <p class="card-text blue-grey-text">LeetCode 是一个非常棒的 OJ（Online Judge）平台，收录了许多互联网公司的算法题目，被称为刷题神器。</p>
        <a href="https://leetcode-cn.com/" class="btn btn-primary">点此进入</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="img/svg/002.jpg.jpg" class="card-img-top"
              alt="" height="225px"height="225px">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">GitHub</h4>
              <!--Text-->
              <p class="card-text blue-grey-text">如果你是一枚Coder，但是你不知道Github，那么你压根不是真正Coder，你只是一个Code搬运工。</p>
              <a href="http://github.com" class="btn btn-primary">点此进入</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

          <!--Card-->
          <div class="card">

            <!--Card image-->
            <div class="view overlay">
              <img src="img/svg/004.jpg.jpg" class="card-img-top"
          alt="" height="225px"height="225px">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
            </div>

            <!--Card content-->
            <div class="card-body">
              <!--Title-->
              <h4 class="card-title">CSDN</h4>
              <!--Text-->
              <p class="card-text blue-grey-text">CSDN是全球知名中文IT技术交流平台,提供原创、优质、完整内容的专业IT技术开发社区</p>
              <a href="https://www.csdn.net/" class="btn btn-primary">点此进入</a>
            </div>

          </div>
          <!--/.Card-->

        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->
    </div>
    <!--Main container-->
   

      <div class="container">

      <!--Section: Best Features-->
      <div id="best-features" class="text-center">
            <!-- Heading -->
    <h2 class="mb-5 font-weight-bold fa-2x text-dark">资源分享</h2>
  
    <!--Grid row-->
    <div class="row d-flex justify-content-center mb-4">
  
      <!--Grid column-->
      <div class="col-md-8">
  
        <!-- Description -->
        <p class="black-text text-center fa-bold font-weight-lighter">发现编程世界的满天星辰 ✨.</p>
  
      </div>
      <!--Grid column-->
  
    </div>
    </div>

 <!--Grid row-->
 <div class="row">

  <!--Grid column-->
  <div class="col-md-4 mb-1">
    <i class="fas fa-camera-retro fa-4x blue-grey-text"></i>
    <h4 class="my-4">Css-tricks</h4>
    <img src="img/svg/006.png" class="card-img-top"
        alt="" width="30px" height="250px">
    <p class="black-text text-left">
      CSS Tricks是一个国外的优秀前端开发博客，主要分享使用CSS样式的技巧、经验和教程等。值得前端开发者阅读收藏的国外网站。<br>
      <a href="https://css-tricks.com/">https://css-tricks.com/</a>
    </p>
  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-4 mb-1">
    <i class="fas fa-heart fa-4x blue-grey-text"></i>
    <h4 class="my-4">Iconfont</h4>
    <img src="img/svg/007.jpg" class="card-img-top" alt="" width="30px" height="250px">
    <p class="black-text text-left">
      iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力<br>
      打造，设计和前端开发的便捷工具
    <a href="
    https://www.iconfont.cn/">
    https://www.iconfont.cn/</a>
    </p>
  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-4 mb-1">
    <i class="fas fa-bicycle fa-4x blue-grey-text"></i>
    <h4 class="my-4">Freecodecamp</h4>
    <img src="img/svg/008.png "class="card-img-top" width="30px" height="250px">
    <p class="black-text text-left">我们准备了成千上万个编程关卡来帮助提升你的编程技能。 每当独立完成 5 个终极项目，你就可以获得一个免费证书。
      <a href="
      https://learn.freecodecamp.one/">
     https://learn.freecodecamp.one/</a>  
    </p>
     
  
  </div>
  <!--Grid column-->

   <!--Grid column-->
   <div class="col-md-4 mb-1">
    <i class="fas fa-heart fa-4x blue-grey-text"></i>
    <h4 class="my-4">JavaGuide</h4>
    <img src="img/svg/009.png" class="card-img-top" alt="" width="30px" height="250px">
    <p class="black-text text-left">
      非常全面清晰的 Java 学习和面试指南，准备 Java 面试，首选 JavaGuide！<br>
    <a href="
https://github.com/Snailclimb/JavaGuide">
https://github.com/Snailclimb/JavaGuide</a>
    </p>
  </div>
  <!--Grid column-->

   <!--Grid column-->
   <div class="col-md-4 mb-1">
    <i class="fas fa-camera-retro fa-4x blue-grey-text"></i>
    <h4 class="my-4">Vant</h4>
    <img src="img/svg/100.png" class="card-img-top"
        alt="" width="30px" height="250px">
    <p class="black-text text-left">
     
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。<br>
      <a href="https://youzan.github.io/vant/">https://youzan.github.io/vant/</a>
    </p>
  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-4 mb-1">
    <i class="fas fa-bicycle fa-4x blue-grey-text"></i>
    <h4 class="my-4">FreeAiHub</h4>
    <img src="img/svg/101.png "class="card-img-top" width="30px" height="250px">
    <p class="black-text text-left">从基础的linux操作系统到高等数学，微积分，到进阶的数据科学，再到机器学习与深度学习 更有像无人驾驶等不同方向应用级项目供您实践
      <a href="
      https://www.freeaihub.com/">
      https://www.freeaihub.com/</a>  
    </p>
  </div>
  <!--Grid column-->

</div>
<hr class="my-5">
    <div id="container1" style="width: 600px; height: 400px;"> </div>
      <script type="text/javascript">
        var chart; 
      
            var option={ 
                chart: { 
                    renderTo: 'chart_line', //图表放置的容器，DIV 
                    defaultSeriesType: 'line', //图表类型line(折线图), 
                    zoomType: 'x'   //x轴方向可以缩放 
                }, 
                credits: { 
                    enabled: false   //右下角不显示LOGO 
                }, 
                title: { 
                    text: '编程语言排行榜' //图表标题 
                }, 
                subtitle: { 
                    text: '2009-2020年'  //副标题 
                }, 
                xAxis: {  //x轴 
                    categories: ['2009年','2010年','2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年', '2020年', 
                                ],//x轴标签名称 
                    gridLineWidth: 1, //设置网格宽度为1 
                    lineWidth: 2,  //基线宽度 
                    labels:{y:26}  //x轴标签位置：距X轴下方26像素 
                }, 
                yAxis: {  //y轴 
                    title: {text: '占有率%'}, //标题 
                    gridLineWidth:1,
                    lineWidth: 2 //基线宽度 
                }, 
                plotOptions:{ //设置数据点 
                    line:{ 
                        dataLabels:{ 
                            enabled:false  //在数据点上显示对应的数据值 
                        }, 
                        enableMouseTracking: true //取消鼠标滑向触发提示框 
                    } 
                }, 
                legend: {  //图例 
                    layout: 'horizontal',  //图例显示的样式：水平（horizontal）/垂直（vertical） 
                    backgroundColor: '#ffc', //图例背景色 
                    align: 'left',  //图例水平对齐方式 
                    verticalAlign: 'top',  //图例垂直对齐方式 
                    x: 160,  //相对X位移 
                    y: 70,   //相对Y位移 
                    floating: true, //设置可浮动 
                    shadow: false  //设置阴影 
                }, 
                exporting: { 
                    enabled: false  //设置导出按钮不可用 
                }, 
                series: [
                {
                  name:'Python',
                  data:[4.567,4.860,5.737,3.218,3.665,4.388,2.690,3.854,3.919,7.653,8.294,11.72]
                },
                {  //数据列 
                    name: 'C++', 
                    data: [9.633,9.802,8.754,8.063,8.896,9.115,6.962,6.914,5.184,7.394,8.158,7.56] 
                }, 
                {
                      name:'C',
                      data:[15.837,17.177,15.262,16.976,17.555,17.141,15.745,16.036,7.742,15.447,13.337,17.380]
                },
                { 
                    name: 'Java', 
                    data: [19.401,18.166,19.711,17.479,17.026,18.156,16.041,21.465,16.384,17.436,16.904,11.96] 
                },
              
                {
                  name:'JavaScript',
                  data:[3.540,1.659,1.866,2.322,2.879,1.370,3.297,2.565,2.667,2.131,3.302,2.20]
                },
               ] 
            }; 
        chart=Highcharts.chart('container1',option);
        </script>
      <!--Section: Leave a reply (Logged In User)-->
      <section class="pb-5 mt-5 wow fadeIn" data-wow-delay="0.3s">

        <!--Leave a reply form-->
        <div class="reply-form">
          <h3 class="text-center my-5 h3 pt-3">回复我们 </h3>
          <p class="text-center">(用户登录)</p>
  
          <!--Third row-->
          <div class="row text-center text-md-left">
            <!--Image column-->
            <div class="col-sm-2 col-12 mb-md-0 mt-4">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg" alt="Sample avatar image" class="img-fluid avatar rounded-circle z-depth-2">
            </div>
            <!--/.Image column-->
  
            <!--Content column-->
            <div class="col-sm-10 col-12">
              <div class="md-form">
                <textarea type="text" id="form-mess" class="md-textarea form-control" rows="3"></textarea>
                <label for="form-mess">您的意见或建议</label>
              </div>
  
            </div>
  
            <div class="col-md-12 text-center mt-4">
              <button class="btn btn-pink btn-rounded">提交</button>
            </div>
            <!--/.Content column-->
  
          </div>
          <!--/.Third row-->
        </div>
        <!--/.Leave a reply form-->
  
      </section>
      <!--/Section: Leave a reply (Logged In User)-->
  </main>

  <!-- Footer -->
  <footer class="page-footer indigo pt-4 mt-4 rgba-white-light blue-grey">

    <!-- Footer Links -->
    <div class="container text-center text-md-left">

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-6 mt-md-0 mt-3">

          <!-- Content -->
          <h5 class="text-uppercase"></h5>
          <p>特别鸣谢</p>
            <ul>
              <li>程序员鱼皮</li>
              <li>BootStrap 官网</li>
            </ul>
        </div>
        <!-- Grid column -->

        <hr class="clearfix w-100 d-md-none pb-3">

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

         
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">

          <!-- Links -->
          <h5 class="text-uppercase">作者二维码</h5>
          <img src="img/svg/csl.png">
          

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">©Cs-L Charlie;
    </div>
    <!-- Copyright -->
   
  </footer>
  <!-- Footer -->I

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  

</body>

</html>